import React, {Component} from "react";
import PropTypes from "prop-types";
import {Text, View} from "react-native";
import {List, Modal, SwipeAction} from "antd-mobile";
import moment from "moment";
import "moment/locale/zh-cn";

import * as Libs from "../../libs/Libs";

const Item = List.Item
const Brief = Item.Brief
const zhNow = moment().locale('zh-cn').utcOffset(8)

const scancodeImg = require('../../img/Normal/scancode.png')
const handenterImg = require('../../img/Normal/handenter.png')
const cameraImg = require('../../img/Normal/camera.png')
const batchImg = require('../../img/Normal/batch.png')

const alert = Modal.alert


export default class ScanCodeCell extends Component {
  static propTypes = {
    producerOrganNo: PropTypes.any,
    code: PropTypes.string,
    delFunc: PropTypes.func
  }
  constructor(props) {
    super(props)
    this.state = {
      materialName: '',
      materialPrice: ''
    }
  }
  render() {
    return (
      this.renderContent()
    )
  }

  componentDidMount() {
    this.materialCode = this.props.code.substring(0, 5)
    this.materialDate = this.props.code.substring(5, 14)
    this.dataFull = '20' + this.materialDate
    this.materialBox = this.props.code.substring(14, 20)
    this.codeToName(this.materialCode)
  }

  renderContent() {

    return (
      <SwipeAction
        autoClose
        right={[
          {
            text: '取消',
            onPress: () => console.log('cancel'),
            style: { backgroundColor: '#ddd', color: 'white' },
          },
          {
            text: '删除',
            onPress: () => { this.props.delFunc(this.props.code) },
            style: { backgroundColor: '#F4333C', color: 'white' },
          },
        ]}
      >
        <Item>
          <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
            <Text style={{fontWeight: 'bold', color: '#333333'}}>{this.state.materialName}</Text>
            <Text>{this.state.materialPrice}</Text>
          </View>
          <View style={{height: 5}}></View>
          <View><Text>批号:{this.dataFull}  箱号: {this.materialBox}</Text></View>
        </Item>
      </SwipeAction>
    )
  }
  codeToName(code) {
    console.log('trans code in ' , this.props.producerOrganNo)
    Libs.getProductName(this.props.producerOrganNo, code, (val) => {
      val = val || {}
      console.log('code: ', code, 'result: ', val)
      this.setState({
        materialName: val['specName'] || code,
        materialPrice: val['specPrice'] || ''
      })
    })
  }
}
